<template>
  <div class="user-order-container">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
      <PersonalCenterSidebar />
    </div>

    <!-- 右侧内容区域 -->
    <div class="content-area">
      <!-- 功能区域 -->
      <div class="function-area">
        <el-input v-model="search" placeholder="请输入搜索关键词" style="width: 300px; margin-right: 10px;"></el-input>
        <el-button type="primary" @click="searchByRoomName">搜索</el-button>
      </div>

      <!-- 卡片区域 -->
      <div class="card-container">
        <div class="card" v-for="order in tableData" :key="order.orderId">
          <div class="card-header">
            <span>订单号: {{ order.orderId }}</span>
            <span>用户: {{ order.customerId }}</span>
          </div>
          <div class="card-body">
            <p><strong>下单日期:</strong> {{ order.orderDate }}</p>
            <p><strong>金额:</strong> {{ order.totalAmount }}</p>
            <p><strong>订单状态:</strong> {{ order.status }}</p>
            <p><strong>地址:</strong> {{ order.shippingAddress }}</p>
            <p><strong>备注:</strong> {{ order.notes }}</p>
            <el-button type="success" @click="showPaymentDialog(order)">已支付</el-button>
          </div>
        </div>
      </div>

      <!-- 返回按钮 -->
      <div class="back-button-container">
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
    </div>

    <!-- 支付对话框 -->
    <el-dialog title="支付" :visible.sync="paymentDialogVisible" width="30%">
      <img src="https://www.qrcode-monkey.com/images/paypal_logo_large.png" alt="支付宝二维码" style="width: 100%; display: block;">
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentDialogVisible = false">取消支付</el-button>
        <el-button type="primary" @click="confirmPayment">确认支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import router from "@/router"; // 引入路由实例
import PersonalCenterSidebar from "@/views/PersonalCenterSidebar.vue";

export default {
  name: 'UserOrder',
  components: { PersonalCenterSidebar },
  data() {
    return {
      form: {},
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      userId: 1,
      showPagination: true, // 默认显示分页栏，可以根据需要设置为 false 来隐藏
      paymentDialogVisible: false, // 控制支付对话框的显示和隐藏
      selectedOrder: null // 当前选中的订单信息
    }
  },
  methods: {
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },

    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },

    load() {
      request.get("/user/getOrderPage", {
        params: {
          userId: this.userId,
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },

    searchByRoomName() {
      request.get("/user/getUseByName", {
        params: {
          username: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    goBack() {
      router.go(-1);
    },
    showPaymentDialog(order) {
      this.selectedOrder = order;
      this.paymentDialogVisible = true;
    },
    confirmPayment() {
      alert('支付成功！');
      this.paymentDialogVisible = false;
      // 这里可以添加实际的支付逻辑，比如调用支付接口等。
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>
/* 容器样式 */
.user-order-container {
  display: flex;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

/* 左侧侧边栏样式 */
.sidebar {
  width: 250px;
  margin-right: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 右侧内容区域样式 */
.content-area {
  flex-grow: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 功能区域样式 */
.function-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* 卡片区域样式 */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: bold;
}

.card-body {
  p {
    margin: 5px 0;
  }
}

/* 返回按钮容器样式 */
.back-button-container {
  text-align: center;
  margin-top: 20px;
}

/* 按钮样式 */
.el-button {
  margin: 0 5px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: scale(1.05);
}

/* 输入框样式 */
.el-input {
  transition: border-color 0.3s;
}

.el-input:focus-within {
  border-color: #409eff;
}
</style>
